@media screen and (max-width 1468px)
  html, body
    font 400 15px/1 "Open Sans", "Hiragino Sans GB", sans-serif
  .nav
    width 492px
    &.fullscreen
      margin-left -492px
    &-left
      width 100px
      .avatar
        width 80px
        height 80px
      ul
        font-size 16px
    &-right
      width 390px
      .title-list
        form span
          #tagswitch:checked +#tagsWitchIcon:after
            top 9px
          #tagsWitchIcon:after
            top 9px
        nav a
          .post-title
            font-size 15px
          .post-date
            font-size 14px
    .hide-list
      left 492px
      &.fullscreen
        left 0
  .post
    font-size 17px
    .pjax
      max-width 780px

@media screen and (max-width 1024px)
  .nav
    position absolute
    top 0px
    left 0px
    z-index 30
    -webkit-overflow-scrolling touch
    position absolute
    margin-left -492px
    &.fullscreen
      margin-left 0px
    &.mobile
      margin-left 0px
    .hide-list
      .brackets.first
        display none
      &.fullscreen
        left 492px
        .brackets.first
          display block
  .post
    .pjax,.pjax.fullscreen
      padding 0 18px
      article .div_img
        margin 0 -18px 25px
  .full-toc
    .full
      .min:before
        float left
        width 50%
        content "\e98c"
      .max:before
        float left
        width 50%
        content "\e98b"
      .mobile:before
        content "\e98b"
    #rocket
      &:hover::before
        color #283444
      &.launch:before
        color #449fdb
@media screen and (max-width 426px)
  .nav
    width 100%
    overflow hidden
    &-left
      width 100%
      height auto
      .avatar_target
        .avatar
          height 80px
          width 80px
      .more-menus
        position: absolute;
        color: white;
        display: block;
        z-index: 100;
        bottom: 32px;
        right: 0;
        border: solid 1px;
        border-right: none;
        border-radius: 10px 0 0 10px;
        line-height: 20px;
      .left-bottom
        top 108px
        text-align center
        .menus
          display none
        a.about
          border-top none
          border-right none!important
          display inline
          margin-right 126px
          &.hasFriend
            margin-right 0
          &:after
            content '·'
            margin-left: 7px;
        a.friends
          border-top none
          display inline
          margin-left 68px
          &:before
            content '·'
            margin-right: 7px;
      .avatar
        margin 20px auto 15px
      ul
        display none
    &-right
      width 100%
      height 100%
      overflow-y hidden
      form
        height 52px
        .search
          width 220px
          padding 8px 0 0 20px
        .cross
          right 116px
          top 24px
        span
          top 21px
      .title-list
        nav
          top 64px
          bottom 160px
          height calc(100vh - 235px)
          a
            .post-title
              width calc(100vw - 32px)
      .friends-area .friends-content
        height calc(100vh - 232px)
        ul
          margin-left 30px
    &-right nav a
      .post-title
        width 90%
      .post-date
        display none
    .hide-list
      display none
  .post
    font-size 16px
    .pjax
      padding 0 18px
      max-width 100%
      article
        padding-top 1em
        .article-meta
          font-size 0.9em
          .tag a
            &:before
              border 7px solid transparent
              left -14px
            &:after
              top 4px
        .article-title
          font-size 1.6em
    .article_copyright
      font-size 14px
  .full-toc
    .full
      top 0px
      right 0px
      opacity 0.7
    .post-toc-menu
      top 43px
      right 0px
      opacity 0.7
    #rocket
      right -7px
  .shang_box
    width: 100%;
    height 400px;
    bottom: 0px;
    left: initial;
    top: initial;
    margin-left: initial;
    padding: 0;
    .shang_close
      right 10px
    .shang_tit
      font-size 23px
    .shang_payimg
      width 200px
      height 200px
      .pay_img
        width 427px
        &.weixin_img
          margin-left: -227px
        img
          width 200px
@media screen and (max-width 322px)
  .nav
    &-right
      form
        .search
          width 165px
          font-size
        .cross
          right 115px
  .post .pjax .article_copyright
    font-size 6px
  .shang_box
    height 331px;
    bottom: 0px;
    left: initial;
    top: initial;
    margin-left: initial;
    padding: 0;
    .shang_close
      font-size 39px
      right 8px
    .shang_tit
      font-size 15px
    .shang_payimg
      width 150px
      height 150px
      .pay_img
        width 324px
        &.weixin_img
          margin-left: -174px
        img
          width 150px
    .shang_payselect
      font-size 16px
